<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>老师信息</title>
    <style>
        /* 此处省略掉层叠样式表 */
    </style>
</head>
<body>
<div id="container">
    <h1>{{ subject.name }}学科的老师信息</h1>
    <hr>
    <h2 v-if="loaded && teachers.length == 0">暂无该学科老师信息</h2>
    <div class="teacher" v-for="teacher in teachers">
        <div class="photo">
            <img :src="'/static/images/' + teacher.photo" height="140" alt="">
        </div>
        <div class="info">
            <div>
                <span><strong>姓名：{{ teacher.name }}</strong></span>
                <span>性别：{{ teacher.sex | maleOrFemale }}</span>
                <span>出生日期：{{ teacher.birth }}</span>
            </div>
            <div class="intro">{{ teacher.intro }}</div>
            <div class="comment">
                <a href="" @click.prevent="vote(teacher, true)">好评</a>&nbsp;&nbsp;
                (<strong>{{ teacher.good_count }}</strong>)
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="" @click.prevent="vote(teacher, false)">差评</a>&nbsp;&nbsp;
                (<strong>{{ teacher.bad_count }}</strong>)
            </div>
        </div>
    </div>
    <a href="/static/html/subjects.html">返回首页</a>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script>
    let app = new Vue({
        el: '#container',
        data: {
            subject: {},
            teachers: [],
            loaded: false
        },
        created() {
            fetch('/api/teachers/' + location.search)
                .then(resp => resp.json())
                .then(json => {
                    this.subject = json.subject
                    this.teachers = json.teachers
                })
        },
        filters: {
            maleOrFemale(sex) {
                return sex? '男': '女'
            }
        },
        methods: {
            vote(teacher, flag) {
                let url = flag? '/praise/' : '/criticize/'
                url += '?tno=' + teacher.no
                fetch(url).then(resp => resp.json()).then(json => {
                    if (json.code === 10000) {
                        if (flag) {
                            teacher.good_count = json.count
                        } else {
                            teacher.bad_count = json.count
                        }
                    }
                })
            }
        }
    })
</script>
</body>
</html>
